<template>
  <div>
    <el-autocomplete
      class="inline-input wid220"
      v-model="brand"
      clearable
      @clear="Clear()"
      ref="changeBrandInput"
      :fetch-suggestions="querySearchAsync"
      placeholder="请输入品牌名称"
      @select="
        item => {
          handleSelect(item);
        }
      "
      ><template slot-scope="{ item }">
        <div class="main_name">
          <span class="code">{{ item.title }}</span>
        </div>
      </template>
    </el-autocomplete>
  </div>
</template>

<script>
export default {
  props: ["brandlist"],
  data() {
    return {
      brand: "",
      list: []
    };
  },
  methods: {
    querySearchAsync(queryString, cb) {
      let restaurants = this.list;
      let results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    //过滤方法
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    handleSelect(item) {
      this.brand = item.title;
      this.$emit("sendValue", item);
    },
    Clear() {
      this.$emit("clear");
    },
    focus() {
      this.$refs["changeBrandInput"].focus();
    }
  },
  created() {
    this.list = this.brandlist;
  }
};
</script>

<style lang="scss" scoped>
.main_name {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: initial;
  padding: 0 0;
  height: 40px;
  .code {
    color: #999;
  }
}
/deep/.el-autocomplete-suggestion__wrap{
  padding: 0px;
}
</style>
